import { reactive, ref, watchEffect } from 'vue';

/**
 * @description: 样式hook
 * @param: props
 */
export const useLayout = props => {
  let searchConfigs = ref([{ list: [] }]);
  const isShowExpandBtn = ref(false);

  /**
   * @description: 监听props.configs的变化进行重新布局
   * @param: props.configs 搜索表单数据
   * @returns: searchConfigs 格式化之后的数据。让他符合form表单的数据格式，并且添加button按钮
   * @returns: isShowExpandBtn 是否展示展开/收起 按钮
   */
  watchEffect(() => {
    const len = props.configs.length,
      EXPAND_LEN = 8;
    isShowExpandBtn.value = len > EXPAND_LEN;
    let configs = props.configs;
    if (isShowExpandBtn.value) {
      configs = props.configs.map((item, index) => {
        if (index >= EXPAND_LEN) item.hidden = true;
        return item;
      });
    }
    searchConfigs.value[0].list = [...configs];
  });

  return {
    searchConfigs,
    isShowExpandBtn,
  };
};
